<template>
    <div style="background-color: white; flex: 1">
        <div style="display: flex; background-color: white; width: 100%; height: 100%">
            <view class="leftCerten" style="background: white; flex: 0 0 60%; border: 1px solid #edeeed">
                <!-- style="cursor: crosshair" -->
                <div v-if="sdgz == 1" class="overlay" @mousemove="getMousePosition" @click="getpos"></div>
                <div class="content" style="width: 100%; height: 100%">
                    <img class="full-image" src="@/assets/fileimage.jpeg" alt="Description of Image" />
                </div>
            </view>

            <view style="
          display: flex;
          flex: 0 0 40%;
          background-color: white;
          flex-direction: column;
        ">
                <view class="rightTop" style="background: white; flex: 0 0 70%; border: 1px solid #edeeed">
                    <div>操作区域</div>
                    <div style="border: 1px solid #edeeed; padding-bottom: 5px">
                        <!-- <view>
                            <view>
                                <el-button type="primary" style="margin-top: 20px"
                                    :disabled="sdgz == 1">Zoom-</el-button>
                                <el-button type="primary" style="margin-top: 20px"
                                    :disabled="sdgz == 1">Zoom+</el-button>
                                <el-button type="primary" style="margin-top: 20px"
                                    :disabled="sdgz == 1">Focus-</el-button>
                                <el-button type="primary" style="margin-top: 20px"
                                    :disabled="sdgz == 1">Focus+</el-button>
                            </view>
                            <view style="margin-left: 5px">
                                <el-button type="primary" style="margin-top: 20px"
                                    :disabled="sdgz == 1">AutoFocus</el-button>
                                <el-button type="primary" style="margin-top: 20px"
                                    :disabled="sdgz == 1">光学复位</el-button>
                            </view>
                        </view> -->

                        <div>
                            开环闭环：
                            <el-select v-model="pzjkzbean.khbh" placeholder="请选择" clearable
                                style="width: 240px; margin: 15px">
                                <el-option v-for="item in optionskhbh" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>


                            <div v-if="pzjkzbean.khbh && pzjkzbean.khbh == '1'">
                                <div style="margin-left: 5px;margin-top: 5px;">
                                    通道1电压:
                                    <!-- <el-input v-model="pzjkzbean.kh.dy1" style="width: 240px" placeholder="input" clearable /> -->
                                    <el-input-number v-model="pzjkzbean.kh.dy1" :min="0" :max="180" />
                                </div>

                                <div style="margin-left: 5px;margin-top: 5px;">
                                    通道2电压:
                                    <!-- <el-input v-model="pzjkzbean.kh.dy2" style="width: 240px" placeholder="input" clearable /> -->
                                    <el-input-number v-model="pzjkzbean.kh.dy2" :min="0" :max="180" />
                                </div>

                                <div style="margin-left: 5px;margin-top: 5px;">
                                    通道3电压:
                                    <!-- <el-input v-model="pzjkzbean.kh.dy3" style="width: 240px" placeholder="input" clearable /> -->
                                    <el-input-number v-model="pzjkzbean.kh.dy3" :min="0" :max="180" />
                                </div>



                            </div>

                            <div v-if="pzjkzbean.khbh && pzjkzbean.khbh == '2'">
                                <div style="margin-left: 5px;margin-top: 5px;">
                                    通道1偏移量:
                                    <!-- <el-input v-model="pzjkzbean.kh.py1" style="width: 240px" placeholder="input" clearable /> -->
                                    <el-input-number v-model="pzjkzbean.kh.py1" :min="0" :max="180" />
                                </div>

                                <div style="margin-left: 5px;margin-top: 5px;">
                                    通道2偏移量:
                                    <!-- <el-input v-model="pzjkzbean.kh.py2" style="width: 240px" placeholder="input" clearable /> -->
                                    <el-input-number v-model="pzjkzbean.kh.py2" :min="0" :max="180" />
                                </div>

                                <div style="margin-left: 5px;margin-top: 5px;">
                                    通道3偏移量:
                                    <!-- <el-input v-model="pzjkzbean.kh.py3" style="width: 240px" placeholder="input" clearable /> -->
                                    <el-input-number v-model="pzjkzbean.kh.py3" :min="0" :max="180" />
                                </div>
                            </div>

                            <el-button type="primary" style="margin-top: 20px">启动</el-button>
                        </div>


                    </div>

                    <div>状态参数返回区域</div>
                    <div style="border: 1px solid #edeeed; padding-bottom: 5px">
                        <view v-if="pzjkzbean.khbh && pzjkzbean.khbh == '1'">
                            当前模式：开环
                            <view>
                                <div>第1个通道电压: 36</div>
                                <div>第2个通道电压: 24</div>
                                <div>第3个通道电压: 24</div>
                            </view>
                        </view>

                        <view v-else-if="pzjkzbean.khbh && pzjkzbean.khbh == '2'">
                            当前模式：闭环
                            <view>
                                <div>第1个通道偏移量: 1.1</div>
                                <div>第2个通道偏移量: 1.2</div>
                                <div>第3个通道偏移量: 1.3</div>
                            </view>
                        </view>
                    </div>
                </view>

                <view class="rightBottom" style="background: white; flex: 0 0 30%; border: 1px solid #edeeed">日志打印


                    <div>偏转镜设备启动中</div>

                </view>
            </view>
        </div>
    </div>
</template>

<script>
// import homeBg from "src/assets/fileimage.jpeg";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
    name: "TopMenu",
    data() {
        return {
            screenHeightPx: this.screenHeight + "px",
            screenHeight: 0,
            pageTitle: "1111",
            Menu_pos: 0,
            class: "kkhjh",

            gzms: 0, //0搜索模式 1跟踪模式

            sdgz: 0, //0 正常模式 1手动跟踪 手动跟踪 其他按钮不可点击

            xpos: 0,
            ypos: 0,
            fileurl: "../../../../../../assets/fileimage.jpeg",




            // 偏转镜
            pzjkzbean: {
                "gzms": '',
                "kh": {},
                "bh": {},
                "E18": {
                    "bxfs": {


                    },
                    "xw_bxfs": {


                    },
                    "zq_bxfs": {


                    },
                    "zq_xwbxfs": {


                    },
                    "y_zxdjfs": {


                    },
                    "e_zxdjfs": {


                    }

                },
                "E18_1": {

                }

            },


            optionscklj: [
                {
                    value: "E18",
                    label: "E18",
                },
                {
                    value: "E18_1",
                    label: "E18_1",
                },
            ],

            optionstd: [
                {
                    value: "1",
                    label: "1",
                },
                {
                    value: "2",
                    label: "2",
                },
            ],

            optionsblx: [
                {
                    value: "1",
                    label: "正旋波",
                },
                {
                    value: "2",
                    label: "方波",
                }, {
                    value: "3",
                    label: "三角波",
                }, {
                    value: "4",
                    label: "锯齿波",
                }
            ],

            optionsfsms: [
                {
                    value: "1",
                    label: "单路告诉电压波形",
                },
                {
                    value: "2",
                    label: "相位可调并发电压波形",
                }, {
                    value: "3",
                    label: "周期发单路高速电压波形",
                }, {
                    value: "4",
                    label: "周期相位可调并发电压表波",
                }, {
                    value: "5",
                    label: "正旋波开环叠加",
                },
            ],


            optionskhbh: [
                {
                    value: "1",
                    label: "开环",
                },
                {
                    value: "2",
                    label: "闭环",
                }
            ],
        };
    },

    onload() {
        this.getvideo();
    },

    mounted() {
        console.log("onload6");
        this.$emit("message", 6);
    },

    methods: {
        sdgzsz() {
            this.sdgz = !this.sdgz;
            if (this.sdgz == 1) {
                this.gzms = 1;
            } else {
                this.gzms = 0;
            }
        },

        getMousePosition(event) {
            this.xpos = event.clientX;
            this.ypos = event.clientY;
        },
        getpos() {
            ElMessageBox.confirm(
                "是否向坐标（" + this.xpos + "," + this.ypos + ")点进行跟踪?",
                "Warning",
                {
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    type: "warning",
                }
            )
                .then(() => {
                    // ElMessage({
                    //   type: "success",
                    //   message: "Delete completed",
                    // });
                })
                .catch(() => {
                    // ElMessage({
                    //   type: "info",
                    //   message: "Delete canceled",
                    // });
                });
            console.log("xpos=" + this.xpos + " ypos=" + this.ypos);
        },
        yscs() {
            this.$router.push("/kzcs");
        },

        getvideo() {
            var webRtcServer = null;
            //页面加载时加载视频画面,请先打开webrtc服务
            window.onload = function () {
                //video：需要绑定的video控件ID
                //启动webrtc-streamer的设备IP——工控机的ip
                webRtcServer = new WebRtcStreamer(
                    "videoLive",
                    "http://127.0.0.1:8000/"
                );
                //需要查看的rtsp地址
                var rtspUrl =
                    "rtsp://admin:zdxk123456@192.168.1.250:554/h264/ch1/main/av_stream";
                webRtcServer.connect(rtspUrl);
            };
            //页面退出时销毁
            window.onbeforeunload = function () {
                webRtcServer.disconnect();
            };

            // const video = document.getElementById("videoLive");
            // video.pause();
            // setTimeout(function () {
            //   video.play();
            // }, 2000);
        },
    },
};
</script>

<style scoped>
.top-menu {
    background-color: #333;
    color: white;
    padding: 10px;
}

.top-menu a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
    display: inline-block;
}

.top-menu a.active {
    font-weight: bold;
}

.leftCerten {
    position: relative;

    .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        /* 半透明遮罩 */
        z-index: 1;

        /* cursor: url(@/image/cursor_icon.png), default; */
        /* cursor: url(//img.58cdn.com.cn/resource/xxzl/captcha/pencil.png), default; */
        /* cursor: url(//img.58cdn.com.cn/resource/xxzl/captcha/pencil.png), default; */

        cursor: url("@/assets/mz.ico"), default;
        /* 
    cursor: url(@/assets/logo.png), default;
    border: 1px solid #ccc; */
    }

    .content {
        position: relative;

        .full-image {
            width: 100%;
            /* 使图片宽度充满容器 */
            height: 100%;
            /* 使图片高度充满容器 */
        }
    }
}
</style>
